<template>
    <div class="login-wrap">
        <div class="goBack" @click="goIndex"></div>
        <div id="particlesl"></div>
        <div class="ms-login">
              <el-tabs v-model="activeName">
                <el-tab-pane label="注册" name="first">
                      <div class="loginWrap">
                        <form action="">
                            <div class="mobile" style="margin: 0;">
                                <span class="info">手机号 :</span><el-input
                                placeholder="请输入手机号"
                                prefix-icon="el-icon-mobile-phone"
                                v-model="mobile" type="number">
                                </el-input>
                                <el-button type="info" round  size="small" @click="sendPhone">{{phoneNum}}</el-button>
                            </div>
                            <div>
                                <span class="info">密码 :</span><el-input
                                placeholder="请输入密码"
                                prefix-icon="el-icon-goods"
                                v-model="password" type="password">
                                </el-input>
                            </div> 
                            <div>
                                <span class="info">确认密码 :</span><el-input
                                placeholder="请再次输入密码"
                                prefix-icon="el-icon-goods"
                                v-model="repe_password" type="password">
                                </el-input>
                            </div>
                            <div>
                                <span class="info">验证码 :</span><el-input
                                placeholder="请输入手机验证码"
                                prefix-icon="el-icon-bell"
                                v-model="validate" type="text">
                                </el-input>
                            </div>
                             <el-button type="info" @click="register">注册</el-button>
                        </form>
                      </div>
                </el-tab-pane>
                <el-tab-pane label="登录" name="second">
                     <div class="loginWrap">
                        <form action="">
                            <div class="mobiled">
                                <span class="info">手机号 :</span><el-input
                                placeholder="请输入手机号"
                                prefix-icon="el-icon-mobile-phone"
                                v-model="mobile_login" type="number">
                                </el-input>
                            </div>
                            <div>
                                <span class="info">密码 :</span><el-input
                                placeholder="请输入密码"
                                prefix-icon="el-icon-goods"
                                v-model="password_login" type="password">
                                </el-input>
                            </div>
                            <div style="margin-top: 26px;">
                                <span style="margin-right: 51px;"><el-checkbox v-model="checked"></el-checkbox> 记住密码</span>
                                <span class="forgetpwd">忘记密码?</span>
                            </div>
                             <el-button type="info" @click="login">登录</el-button>
                        </form>
                      </div>
                </el-tab-pane>
              </el-tabs>
        </div>
        <div class="footer">
            <p>版权所有 © 电信智能科技有限公司 皖ICP05001217号 <img src="@/static/img/logo.png" alt=""></p>
        </div>
    </div>
</template>

<script>
    import particles from 'particles.js'
    import $ from 'jquery'
    import _ from 'underscore'
    export default {
        mounted(){
         particlesJS.load('particlesl','./static/data.json');
         //更换验证码，注册在windows上不用vue的dom体系，直接用一级dom
         window.replaceValidate=()=>{
            this.getImageCodeToken()
         }
         if(this.$route.query.login=='true'){
            this.activeName='second'
         }
        },
        data(){
            return {
                mobile:'',
                validate:'',
                password:'',
                repe_password:'',
                mobile_login:'',
                password_login:'',
                checked: false,
                activeName: 'second',
                phoneNum:'发 送',
                allowTime:60
            }
        },
        methods: {
            getImageCodeToken(){
                $('#validateCode').fadeOut()
                this.$http.post(`${this.$store.getters.serverIp}create_token`).then((response)=>{
                  localStorage.setItem('imageCode',response.data)
                  this.getImageCode(localStorage.getItem('imageCode'))
                }).catch((response)=>{

                })
            }, 
            getImageCode(imageCode){
                var xmlhttp=new XMLHttpRequest();
                xmlhttp.open("GET",`${this.$store.getters.serverIp}random_pic?token=${imageCode}`,true);
                xmlhttp.responseType = "blob";
                xmlhttp.onload = function(){
                    if (this.status == 200) {
                        var blob = this.response;
                        if(!blob){
                            this.$message.error('请重新加载验证码')
                            return
                        }
                        var img = document.createElement("img");
                        img.onload = function(e) {
                            window.URL.revokeObjectURL(img.src); 
                        };
                        img.src = window.URL.createObjectURL(blob);
                        img.id="validateCode"
                        $('#validateCode').remove();
                        $('#validateCode').fadeIn()
                        $('#validateCodeWrap').append(img);
                    }
                }
                xmlhttp.send();
            },
            goIndex(){
                location='../index.html' 
            },
            register(){
                var data={
                    phone:this.mobile,
                    password:this.password,
                    code:this.validate
                }
                var hasEmpty=false
                _.each(data,(value)=>{
                    if($.trim(value)==''){
                        hasEmpty=true
                    }
                })
                if(hasEmpty){
                    this.$message.error({message:'注册信息不能为空',duration:1000});
                    return
                }
                if(this.password!=this.repe_password){
                    this.$message.error({message:'两次密码输入不一致',duration:1000});
                    return
                }
                const loading = this.$loading({
                  lock: true,
                  text: '注册验证中',
                  spinner: 'el-icon-loading',
                  background: 'rgba(0, 0, 0, 0.7)'
                });
                this.$http.post(this.$store.getters.serverIp+'register',data).then((response)=>{
                    loading.close();
                    if(response.data.success){
                        this.$message({message:response.data.info,duration:1000});
                        this.activeName="second"
                        this.mobile_login=this.mobile
                    }else{
                        this.$message.error({message:response.data.info,duration:1000});
                    }
                }).catch((response)=>{

                })
            },
            login(){
                var data={
                    phone:this.mobile_login,
                    password:this.password_login,
                    remember:this.checked?1:0
                }
                var hasEmpty=false
                _.each(data,(value)=>{
                    if($.trim(value)==''){
                        hasEmpty=true
                    }
                })
                if(hasEmpty){
                    this.$message.error({message:'登录信息不能为空',duration:1000});
                    return
                }
                const loading = this.$loading({
                  lock: true,
                  text: '登录验证中',
                  spinner: 'el-icon-loading',
                  background: 'rgba(0, 0, 0, 0.7)'
                });
                this.$http.post(this.$store.getters.serverIp+'check_login',data).then((data)=>{
                    loading.close();
                    if(data.data.success){
                        localStorage.setItem('token',data.data.token)
                        localStorage.setItem('username',this.mobile_login)
                        this.$store.commit('setUserName',this.mobile_login)
                        this.checkWriteInfo()
                    }else{
                        this.$message.error({message:data.data.info,duration:1000});

                    }
                }).catch((data)=>{
                        this.$message.error({message:'netwrok fail',duration:1000});
                })
            },
            checkWriteInfo(){
                this.$http.post(this.$store.getters.serverIp+'has_company',{token:localStorage.getItem('token')}).then((data)=>{
                    if(data.data.success){
                        var flag=data.data.has_company
                        if(!flag){
                            localStorage.setItem('isWrite',"noWrite")
                        }else{
                            localStorage.setItem('isWrite',"isWrite")
                        }
                        this.$router.push({path:'/open/account'})
                    }
                }).catch((data)=>{

                })
            },
            sendPhone(){
                if(this.phoneNum=='发 送'){
                     //手机号正则
                    var phoneReg = /(^1[3|4|5|7|8]\d{9}$)|(^09\d{8}$)/
                    if (!phoneReg.test($.trim(this.mobile))) {
                        this.$message.error({message:'手机格式不正确',duration:1000})
                        return
                    }
                    this.$alert(`请输入验证码：<div id="validateCodeWrap"><img id="validateCode"></div><div class="po10"><input class="validateInput"/><span class="replace" onClick="window.replaceValidate()">
                        换一张</span></div>`, {
                      dangerouslyUseHTMLString: true,
                      callback:this.validateImgCode,
                      title:'图片验证码'
                    });
                    this.getImageCodeToken()
                }
            },
            validateImgCode(action){
                if(action=='confirm'){
                    this.phoneNum='发送中'
                    var code={code:$('.validateInput').val(),phone:this.mobile,token:localStorage.getItem('imageCode')}
                    this.$http.post(this.$store.getters.serverIp+'check_random',code).then((response)=>{
                        if(response.data.success){
                            var data={phone:this.mobile,type:'register'}
                            this.$http.post(this.$store.getters.serverIp+'sms_push',data).then((response)=>{
                                if(response.data.success){
                                    this.$message({message:response.data.info,duration:1000});
                                    window.interval=setInterval(()=>{
                                        this.allowTime--
                                        this.phoneNum=this.allowTime+'s'
                                        if(this.allowTime==0){
                                            clearInterval(window.interval);
                                            this.phoneNum='发 送'
                                            this.allowTime=60
                                        }
                                    },1000);
                                }else{
                                    this.phoneNum='发 送'
                                    this.$message.error({message:response.data.info,duration:1000});
                                }
                            },(response)=>{
                            })
                        }else{
                            this.phoneNum='发 送'
                            console.log(this.phoneNum)
                            console.log('sdf')
                            this.$message.error({message:response.data.info,duration:1000})
                        }
                    }).catch((response)=>{

                    })
                }
            }
        }
    }
</script>

<style lang="less">
    #particlesl{
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: #152628;
        background: url(../../static/img/bg.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center 0;
    }
    .login-wrap{
        background: none;
        .goBack{
            position: fixed;
            top: 3%;
            left: 2%;
            color: #fff;
            z-index: 111;
            font-size: 45px;
            width: 48px;
            height: 50px;
            text-align: center;
            border-radius: 7px;
            transition: all 0.3s;
            background-color: #97c0ce;
            background-image: url(../../static/img/7_1.png);
            background-size: 100%;
            &:hover{
                color: #c7dfe6;
                background-color: #FFF;
                cursor: pointer;
            }
        }
        .el-button--info{
            margin-top: 26px;
            font-size: 17px;
        }
        input{
            border: none !important;
            border-bottom: 1px dotted !important;
        }
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }
        input[type="number"]{
            -moz-appearance: textfield;
        }
            .el-input {
        position: relative;
        font-size: 14px;
        display: inline-block;
        width: 60%;
    }
    }
    .el-button--primary {
        color: #fff !important;
        background-color: #374b5f !important;
        border-color: #35373a !important;
    }
    #validateCode{
        width: 45%;
        border-radius: 11px;
        border: 1px solid #ccc;
        vertical-align: middle;
    }
    .validateInput{
        width: 35%;
        height: 29px;
        font-size: 19px;
        letter-spacing: 3px;
    }
    .po10{
        position: relative;
        top: 11px;
        .replace{
            color: #409eff;
            font-size: 13px;
            cursor: pointer;
        }
    }
    .el-message-box{
        width: 340px !important;
    }
    .ms-title{
        font-size: 65px;
        color: #ffffff;
        position: relative;
        text-indent: 38px;
    }
    .ms-login{
           position: absolute;
            left: 50%;
            top: 50%;
            width: 312px;
            height: 314px;
            margin: -150px 0 0 -190px;
            padding: 40px;
            background: #fff;
            opacity: 0.8;
            box-shadow: -1px 15px 45px rgba(164, 186, 188, 0.7);
                border: 1px solid #bc9645;
    }
    .login-btn{
        text-align: center;
    }
    .login-btn button{
        width:100%;
        height:36px;
    }
    .el-tabs__item{
        font-size:18px;
    }
    .el-tabs__active-bar{
      background-color: #313f4f;  
    }
    .el-tabs__item:hover {
        color: #186a67;
        cursor: pointer;
    }
    .el-tabs__item.is-active {
        font-size:22px;
      color: #19470e;
    }

    .el-input--small .el-input__inner {
        height: 30px;
        line-height: 30px;
        font-size: 14px;
    }
    .loginWrap{
        text-align: center;
        div{
            margin-top: 10px;
            .info{
                position: relative;
                top: 4px;
                width: 29%;
                display: inline-block;
                text-align: right;                
            }
        }
    }
    .mobile{
        .el-input{
            width: 54%;
        }
        button{
            height: 23px !important;
            width: 43px !important;
            font-size: 12px !important;
            line-height: 6px !important;
            padding: 0 !important;
        }
    }
    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
        background-color: #bac7d5;
        border-color: #161a1d;
    }
    .el-checkbox__inner{
        border-color: #031221 !important;
    }  
    .el-checkbox__inner:hover {
        border-color: #031221 !important;
    }
    .forgetpwd{
        color: #3e4e5f;
        font-size: 14px;
        cursor: pointer;
    }
    .footer{
        height: 5%;
    position: absolute;
    width: 100%;
    top: 95%;
    background-color: #190629;
    padding: 0 10%;
    box-sizing: border-box;
    color: #fff;
    font-size: 13px;
    text-align: center;
    img{
          width: 126px;
    position: relative;
    top: 9px;
    vertical-align: bottom;
    }
}
</style>